<script setup lang="ts">
import { useCartStore } from '@/stores/cart'
import { useRouter } from 'vue-router'

const cart = useCartStore()
const router = useRouter()

function submitOrder(){
  if(cart.items.length === 0) return
  // TODO: 集成下单接口；当前先模拟成功
  router.push({ name: 'success' })
}
</script>

<template>
  <div class="container">
    <h2>确认订单</h2>
    <div class="box">
      <h3>商品清单</h3>
      <ul>
        <li v-for="it in cart.items" :key="it.skuId">
          <span>{{ it.name }}</span>
          <span>x{{ it.quantity }}</span>
          <span>￥{{ (it.price * it.quantity).toFixed(2) }}</span>
        </li>
      </ul>
      <div class="total">合计：<b>￥{{ cart.totalPrice.toFixed(2) }}</b></div>
      <div class="actions">
        <button @click="router.push({ name: 'cart' })">返回购物车</button>
        <button :disabled="cart.items.length===0" @click="submitOrder">提交订单</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box { border: 1px solid #eee; border-radius: 8px; padding: 16px; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: grid; grid-template-columns: 1fr 80px 140px; gap: 8px; padding: 8px 0; border-bottom: 1px dashed #eee; }
.total { text-align: right; padding: 12px 0; }
.actions { display: flex; justify-content: flex-end; gap: 8px; }
.actions button { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; }
.actions button:last-child { background: #42b883; color: #fff; }
</style>